﻿ @{
    ViewBag.Title = "产妇及宝宝信息";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    :root {
        --primary-color: #4a89dc;
        --success-color: #48cfad;
        --warning-color: #f6bb42;
        --danger-color: #ed5565;
        --light-gray: #f5f7fa;
        --dark-gray: #656d78;
    }

    .detail-container {
        padding: 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

    .action-btn {
        flex: 1;
        min-width: 150px;
        height: 50px;
        font-size: 16px;
        border-radius: 8px;
        transition: all 0.3s;
    }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

    .btn-checkout {
        background-color: var(--danger-color);
        color: white;
        border: none;
    }

    .section-title {
        font-size: 22px;
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--light-gray);
    }

    .info-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        padding: 30px;
        margin-bottom: 30px;
    }

    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
    }

    .info-item {
        margin-bottom: 15px;
    }

    .info-label {
        font-weight: 600;
        color: var(--dark-gray);
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

        .info-label i {
            margin-right: 10px;
            color: var(--primary-color);
        }

    .info-value {
        font-size: 18px;
        padding-left: 28px;
    }

    .tab-header {
        display: flex;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px;
    }

    .tab-link {
        padding: 10px 20px;
        cursor: pointer;
        font-weight: 500;
    }

        .tab-link.active {
            color: var(--primary-color);
            border-bottom: 2px solid var(--primary-color);
        }

    .service-item {
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #eee;
        border-radius: 8px;
        transition: all 0.3s;
    }

        .service-item:hover {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

    .service-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
    }

        .service-header h4 {
            margin: 0;
            font-size: 16px;
            color: var(--primary-color);
            flex: 1;
            min-width: 200px;
        }

    .service-date {
        padding: 3px 8px;
        background: #f0f0f0;
        border-radius: 4px;
        font-size: 12px;
        margin-right: 10px;
    }

    .service-category {
        padding: 3px 8px;
        background: #e6f7ff;
        color: var(--primary-color);
        border-radius: 4px;
        font-size: 12px;
    }

    .service-status {
        text-align: right;
        margin-bottom: 10px;
    }

    .status-badge {
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: bold;
    }

        .status-badge.completed {
            background: #e8f8f0;
            color: var(--success-color);
        }

    .service-feedback {
        padding: 10px;
        background: #f9f9f9;
        border-radius: 4px;
        margin-top: 10px;
    }

    .feedback-header {
        color: var(--dark-gray);
        font-weight: bold;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
    }

        .feedback-header i {
            margin-right: 5px;
        }

    .feedback-content {
        color: #666;
        line-height: 1.6;
    }

    .tab-content {
        display: none;
    }

        .tab-content.active {
            display: block;
        }
    #ruzhu{
        margin-left:28px
    }
</style>

<body class="gray-bg">
    <div class="detail-container">
        <!-- 操作按钮区域 -->
        <div class="action-buttons">
            @if (ViewBag.RoomDetail != null)
            {
                <button type="button" class="layui-btn layui-btn-normal action-btn" id="btnBuyService">
                    <i class="fa fa-shopping-cart"></i> 服务购买
                </button>
                <button type="button" class="layui-btn layui-btn-normal action-btn" id="btnBuyProduct">
                    <i class="fa fa-gift"></i> 产品购买
                </button>
                <button type="button" class="layui-btn layui-btn-normal action-btn" id="btnSpend">
                    <i class="fa fa-list"></i> 消费清单
                </button>
                <button type="button" class="layui-btn btn-checkout action-btn">
                    <i class="fa fa-sign-out"></i> 退房办理
                </button>
            }
            else
            {
                <button type="button" class="layui-btn layui-btn-normal action-btn" id="btnEditRoom">
                    <i class="fa fa-edit"></i> 修改房间信息
                </button>
                <button type="button" class="layui-btn layui-btn-normal action-btn">
                    <i class="fa fa-bed"></i> 办理入住
                </button>
                <button type="button" class="layui-btn layui-btn-normal action-btn">
                    <i class="fa fa-calendar"></i> 预约房间
                </button>
            }
        </div>
        @if (ViewBag.RoomDetail != null)
        {
            <!-- 产妇基本信息 -->
            <div class="section-title">
                <i class="fa fa-female"></i> 产妇基本信息
            </div>
            <div class="info-card">
                <div class="info-grid">
                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-user"></i> 产妇姓名
                        </div>
                        <div class="info-value">@ViewBag.RoomDetail.ParturientName</div>
                    </div>

                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-calendar"></i> 入住天数
                        </div>
                        <div class="info-value">@ViewBag.RoomDetail.DaysStayed 天</div>
                    </div>

                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-baby"></i> 生产类型
                        </div>
                        <div class="info-value">
                            @(ViewBag.RoomDetail.BirthType == 0 ? "剖腹产" : "顺产")
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-phone"></i> 紧急联系人
                        </div>
                        <div class="info-value">
                            @ViewBag.RoomDetail.EmergencyContacts (@ViewBag.RoomDetail.EmergencyContactsPhone)
                        </div>
                    </div>

                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-id-card"></i> 身份证号
                        </div>
                        <div class="info-value">@ViewBag.RoomDetail.CardId</div>
                    </div>

                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-map-marker"></i> 家庭地址
                        </div>
                        <div class="info-value">@ViewBag.RoomDetail.Address</div>
                    </div>
                    <input type="hidden" id="hfContractId" value="@ViewBag.RoomDetail.ContractId" />
                </div>
            </div>
            <!-- 宝宝信息 -->
            <div class="section-title">
                <i class="fa fa-child"></i> 宝宝信息
            </div>
            foreach (var baby in ViewBag.Baby)
            {
                <div class="info-card">
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-signature"></i> 宝宝姓名
                            </div>
                            <div class="info-value">@baby.BabyName</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-venus-mars"></i> 宝宝性别
                            </div>
                            <div class="info-value">
                                @(baby.BabySex == 0? "男" : "女")
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-ruler-vertical"></i> 宝宝身高
                            </div>
                            <div class="info-value">@baby.BabyHeight cm</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-weight"></i> 宝宝体重
                            </div>
                            <div class="info-value">@baby.BabyWeight kg</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-user-tag"></i> 宝宝乳名
                            </div>
                            <div class="info-value">@baby.NickName</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-birthday-cake"></i> 出生日期
                            </div>
                            <div class="info-value">
                                @baby.Birthday
                            </div>
                        </div>
                    </div>
                </div>
            }

            <!-- 服务安排 -->
            <div class="section-title">
                <div class="tab-header">
                    <div class="tab-link active" data-tab="today">
                        <i class="fa fa-calendar-day"></i> 今日服务安排
                    </div>
                    <div class="tab-link" data-tab="history">
                        <i class="fa fa-history"></i> 历史服务安排
                    </div>
                </div>
            </div>
            <div class="info-card">
                <!-- 今日服务安排 -->
                <div class="tab-content active" id="today-tab">
                    @foreach (var service in ViewBag.TodyService)
                    {
                        <div class="service-item">
                            <div class="service-header">
                                <h4>@service.ServiceName</h4>
                                @if (service.ServiceTime != null)
                                {
                                    <span class="service-date">@service.ServiceTime.ToString("yyyy-MM-dd HH:mm")</span>
                                }
                                else
                                {
                                    <span class="service-date"></span>
                                }
                                <span class="service-category">@service.ServiceType</span>
                            </div>
                            @if (service.FeedBack != null && service.FeedBack != "")
                            {
                                <div class="service-status">
                                    <span class="status-badge completed">已实施</span>
                                </div>
                                <div class="service-feedback">
                                    <div class="feedback-header">
                                        <i class="fa fa-comment"></i> 服务反馈
                                    </div>
                                    <div class="feedback-content">
                                        @service.FeedBack
                                    </div>
                                </div>
                            }
                            else
                            {
                                <div class="service-status">
                                    <button class="layui-btn layui-btn-sm confirm-service" data-service-id="@service.Id" data-service-name="@service.ServiceName">确认实施</button>
                                </div>
                            }
                        </div>
                    }
                    @*@if ()
                        {
                            <p style="text-align: center; color: var(--dark-gray);">
                                <i class="fa fa-info-circle"></i> 今日无服务安排
                            </p>
                        }*@
                </div>

                <!-- 历史服务安排 -->
                <div class="tab-content" id="history-tab">
                    @foreach (var service in ViewBag.HistoryService)
                    {
                        <div class="service-item">
                            <div class="service-header">
                                <h4>@service.ServiceName</h4>
                                @if (service.ActualTime != null)
                                {
                                    <span class="service-date">@service.ActualTime.ToString("yyyy-MM-dd HH:mm")</span>
                                }
                                else
                                {
                                    <span class="service-date"></span>
                                }
                                <span class="service-category">@service.ServiceType</span>
                            </div>
                            <div class="service-status">
                                <span class="status-badge completed">已实施</span>
                            </div>

                            @if (!string.IsNullOrEmpty(service.FeedBack))
                            {
                                <div class="service-feedback">
                                    <div class="feedback-header">
                                        <i class="fa fa-comment"></i> 服务反馈
                                    </div>
                                    <div class="feedback-content">
                                        @service.FeedBack
                                    </div>
                                </div>
                            }
                        </div>
                    }
                    @*@if (ViewBag.ServiceVM.ServiceTime != new DateTime(2020, 1, 1))
                        {
                            <p style="text-align: center; color: var(--dark-gray);">
                                <i class="fa fa-info-circle"></i> 暂无历史服务记录
                            </p>
                        }*@
                </div>
            </div>
        }
        else
        {
            <form class="layui-form" action="">
                <!-- 房间基本信息 -->
                <div class="section-title">
                    <i class="fa fa-home"></i> 房间信息
                </div>
                <div class="info-card">
                    <div class="info-grid">
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-hashtag"></i> 房间号
                            </div>
                            <div class="info-value">@ViewBag.HomeVM.Name</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-building"></i> 楼层
                            </div>
                            <div class="info-value">@ViewBag.HomeVM.Floors 楼</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-arrows-alt"></i> 面积
                            </div>
                            <div class="info-value">@ViewBag.HomeVM.Area ㎡</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-compass"></i> 朝向
                            </div>
                            <div class="info-value">@ViewBag.HomeVM.Direction</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-gift"></i> 套餐
                            </div>
                            <div class="info-value">@ViewBag.HomeVM.PackageName</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fa fa-info-circle"></i> 状态
                            </div>
                            <div class="info-value">
                                @if (ViewBag.HomeVM.State == 0)
                                {
                                    <span class="room-status status-available">未入住</span>
                                }
                                else if (ViewBag.HomeVM.State == 1)
                                {
                                    <span class="room-status status-occupied">已入住</span>
                                }
                                else
                                {
                                    <span class="room-status status-reserved">已预约</span>
                                }
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 产妇信息录入 -->
                <div class="section-title">
                    <i class="fa fa-home"></i> 产妇信息
                </div>
                <div class="info-card">
                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-hashtag"></i> 孕妇名
                        </div>
                        <div class="info-value">
                            <input type="hidden" name="HomeId" id="HomeId" lay-verify="HomeId" value="@ViewBag.HomeVM.Id" autocomplete="off" class="layui-input" />
                            <input type="hidden" name="Id" id="Id" lay-verify="Id" autocomplete="off" class="layui-input" />
                            <input type="hidden" name="PackageId" id="PackageId" lay-verify="PackageId" autocomplete="off" class="layui-input" />
                            <input type="hidden" name="PackageId1" id="PackageId1" lay-verify="PackageId1" value="@ViewBag.HomeVM.PackageId" autocomplete="off" class="layui-input" />
                            <input type="tel" name="ParturientName" id="ParturientName" lay-verify="ParturientName" autocomplete="off" class="layui-input" style="height: 40px; width:600px ">
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-hashtag"></i> 合同编号
                        </div>
                        <div class="info-value">
                            <input type="tel" name="ContractNumber" id="ContractNumber" lay-verify="ContractNumber" autocomplete="off" class="layui-input" style="height: 40px; width:600px ">
                            <input type="hidden" name="Cid" id="Cid" lay-verify="Cid" autocomplete="off" class="layui-input" />
                        </div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">
                            <i class="fa fa-hashtag"></i> 入住时间
                        </div>
                        <div class="info-value">
                            <input type="text" name="LiveTime" id="LiveTime" required lay-verify="required" placeholder="请选择入住时间" autocomplete="off" class="layui-input" style="height: 40px; width:600px ">
                        </div>
                  
                    </div>
                    <div class="info-item">
                        <div class="info-label">
                            <button type="submit" id="ruzhu" class="layui-btn" lay-submit="" lay-filter="demo1">入住</button>
                        </div>
                    </div>

                </div>
            </form>
        }
        <!-- 服务反馈弹窗 -->
        <div id="feedback-modal" style="display: none; padding: 20px;">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">服务名称</label>
                    <div class="layui-form-mid layui-word-aux service-name"></div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">服务反馈</label>
                    <div class="layui-input-block">
                        <textarea name="feedback" placeholder="请输入服务反馈内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="feedbackForm">提交反馈</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="~/assets/layui/extra/autocomplete.js"></script>
    <script>
                layui.use(['layer', 'laydate', 'form', 'autocomplete'], function () {
                    var layer = layui.layer;
                    var form = layui.form;
                    var laydate = layui.laydate;
                    var autocomplete = layui.autocomplete;
                    // 初始化表单
                    form.render();
                    //渲染日期
                    laydate.render({
                        elem: '#LiveTime'
                    });
                    autocomplete.render({
                        elem: $('#ParturientName'),
                        caches: false,
                        url: '/FrontDesk/SerachHomePname?ParturientName=' + $('#ParturientName').val(),
                        template_val: '{{d.Id}}',
                        template_txt: '{{d.ParturientName}}',
                        onselect: function (res) {
                            console.log(res)
                            $("#ParturientName").val(res.ParturientName)
                            $("#ContractNumber").val(res.ContractNumber)
                            $("#Id").val(res.Id)
                            $("#Cid").val(res.Cid)
                            $("#PackageId").val(res.PackageId)
                            if ($("#PackageId").val() !== $("#PackageId1").val()) {
                                // 如果不相等，显示错误提示
                                layer.msg('所需套餐 和 房间套餐 的值不一致，请检查！', { icon: 5, time: 3000 });
                            }
                            $('.layui-form-autocomplete dl').empty(); 
                        },
                    })
                    //点击入住

                    form.on('submit(demo1)', function (data) {
                        console.log(data)
                        $.ajax({
                            url: '/Contract/UpdataCap',
                            type: 'POST',
                            data: {
                                contractVM: encodeURIComponent(JSON.stringify(data.field)),
                            },
                            success: function (response) {
                                if (response.success) {
                                   var index = parent.layer.getFrameIndex(window.name);
                                   parent.layer.close(index);
                                   parent.window.location.reload();  // 刷新主页面
                                } else {

                                    alert('操作失败: ' + response.message);
                                }
                            },
                            error: function (xhr, status, error) {

                                alert('发生错误，请稍后再试');
                            }
                        });
                        return false;
                    });
                    // 标签切换
                    $('.tab-link').click(function () {
                        var tabId = $(this).data('tab');
                        $('.tab-link').removeClass('active');
                        $(this).addClass('active');
                        $('.tab-content').removeClass('active');
                        $('#' + tabId + '-tab').addClass('active');
                    });
                    //修改房间信息
                    $('#btnEditRoom').on('click', function (e) {
                        layer.open({
                            title: '修改房间信息 ',
                            type: 2,
                            area: ['60%', '60%'],
                            content: '/Room/EditRoom/' + $('#HomeId').val(),
                            success: function (layero, index) {
                            }
                        });
                    })
                    //服务购买按钮点击事件
                    $('#btnBuyService').on('click', function (e) {
                        layer.open({
                            title: '服务购买 ',
                            type: 2,
                            area: ['60%', '60%'],
                            content: '/Room/BuyService/' + $('#hfContractId').val(),
                            success: function (layero, index) {
                                // 窗口打开后回调
                            }
                        });
                    });
                    //消费清单
                    $('#btnSpend').on('click', function (e) {
                        layer.open({
                            title: "消费列表页面",
                            type: 2,
                            area: ["80%", "80%"],
                            content: '/packagespend/packageservice?Id=' + $('#hfContractId').val(),
                        });
                    })
                    //产品购买按钮点击事件
                    $('#btnBuyProduct').on('click', function (e) {
                        layer.open({
                            title: '产品购买 ',
                            type: 2,
                            area: ['60%', '80%'],
                            content: '/Room/BuyProduct/' + $('#hfContractId').val(),
                            success: function (layero, index) {

                                // 窗口打开后回调
                            }
                        });
                    });
                    // 退房按钮点击事件
                    $('.btn-checkout').click(function () {
                        layer.confirm('确定要为该产妇办理退房手续吗？', {
                            title: '退房确认',
                            icon: 3,
                            btn: ['确定', '取消']
                        }, function () {
                            // 退房逻辑
                            layer.msg('退房手续办理中...', { icon: 16, time: 2000 }, function () {
                                // 获取合同ID
                                var contractId = $('#hfContractId').val();
                                //console.log(ContractId);
                                if (!contractId) {
                                    layer.msg('无法获取合同信息');
                                    return;
                                }
                                //ajax
                                $.post("/PackageSpend/CheckOutQuit", { contractId: contractId }, function (resp) {
                                    if (resp.code === 0) {
                                        layer.msg('退房手续办理完成', { icon: 1 });
                                        parent.layui.table.reload('testPackageOut');
                                    }
                                });
                                layer.close(index);
                            });
                        });
                    });
                    // 确认实施按钮点击
                    $('.confirm-service').click(function () {
                        var serviceId = $(this).data('service-id');
                        var serviceName = $(this).data('service-name');
                        // 设置服务名称
                        $('#feedback-modal .service-name').text(serviceName);
                        // 存储当前点击的按钮引用
                        var $clickedButton = $(this);
                        // 设置服务ID到模态框
                        $('#feedback-modal').data('service-id', serviceId);
                        $('#feedback-modal').data('button-reference', $clickedButton);
                        layer.open({
                            type: 1,
                            title: '服务反馈 - ' + serviceName,
                            area: ['500px', '400px'],
                            content: $('#feedback-modal'),
                            btn: [],
                            success: function (layero, index) {
                                // 清空表单
                                $('#feedback-modal form')[0].reset();
                            }
                        });
                    });
                    // 表单提交
                    form.on('submit(feedbackForm)', function (data) {
                        //得到输入的反馈内容
                        var feedback = data.field.feedback;
                        //得到服务id
                        var serviceId = $('#feedback-modal').data('service-id');
                        // 从模态框中获取之前存储的服务ID和按钮引用
                        var $clickedButton = $('#feedback-modal').data('button-reference');
                        var serviceName = $('#feedback-modal .service-name').text();
                        $.post("/Room/SubmitFeedBack", { Id: serviceId, feedback: feedback }, function (resp) {
                            if (resp.code == 0) {
                                // 找到对应的服务项
                                var $serviceItem = $clickedButton.closest('.service-item');
                                // 更新状态
                                $serviceItem.find('.service-status').html(
                                    '<span class="status-badge completed">已实施</span>'
                                );
                                // 添加反馈内容
                                $serviceItem.append(
                                    '<div class="service-feedback">' +
                                    '   <div class="feedback-header">' +
                                    '       <i class="fa fa-comment"></i> 服务反馈' +
                                    '   </div>' +
                                    '   <div class="feedback-content">' +
                                    feedback +
                                    '   </div>' +
                                    '</div>'
                                );
                                // 移除按钮
                                $clickedButton.remove();
                                layer.msg('服务反馈提交成功', { icon: 1 });
                                layer.closeAll();
                            }
                        })
                        return false;
                    });
                });
    </script>
</body>